<template>
	<a-layout-header class="sp-lay-header">
		<div class="header-animat">
			<div class="header">
				<a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="toggleCollapsed" />
				<SpNavInfo></SpNavInfo>
			</div>
		</div>
		
	</a-layout-header>

</template>

<script>
	import SpNavInfo from '@/components/Layouts/SpNavInfo'
	
	export default {
		name: "SpHeader",
		components:{
			SpNavInfo,
		},
		props: {
			collapsed: {
				type: Boolean,
				required: false,
				default: false
			},
		},

		methods: {
			toggleCollapsed() {
				this.$emit('toggle')
			}
		}
	}
</script>

<style>
	.header-animat {
		position: relative;
		z-index: 105;
	}

	.ant-layout-header {
		height: 64px;
		padding: 0 50px;
		line-height: 64px;
		background: #001529;
	}

	.header-animat .header {
		height: 64px;
		padding: 0 12px 0 0;
		background: #fff;
		-webkit-box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
		box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
		position: relative;
	}

	.header-animat .trigger {
		font-size: 20px;
		line-height: 64px;
		padding: 0 24px;
		cursor: pointer;
		-webkit-transition: color .3s;
		transition: color .3s;
	}
</style>
